<template>
    <div class="recommend" v-if="data">
        <van-image width="240" height="120" :src="data.currentCategory.picUrl"/>
        <div class="tips">{{ data.currentCategory.name }}</div>
        <van-grid :column-num="3">
            <van-grid-item v-for="item in data.currentSubCategory" :key="item.id" :icon="item.iconUrl"
                           :text="item.name" @click="toPage(item.name)" />
        </van-grid>
    </div>
</template>

<script>
    export default {
        name: "Recommend",
        data() {
            return {
                data: null,
                id: null
            }
        },
        watch: {
            async $route(to, from) {
                // console.log(to.path)
                const id = this.$route.params.id
                this.id = id
                const get1 = await this.$get('catalog/current?id=' + id)
                this.data = get1.data.data
                // console.log(get1.data.data)
            }
        },
        methods: {
          toPage(name) {
              this.$router.push({name: 'goodslist',
              query: {
                  keyword: name
              }})
          }
        },
        async activated() {
            // console.log('activated')
            const id = this.$route.params.id
            this.id = id
            const get1 = await this.$get('catalog/current?id=' + id)
            this.data = get1.data.data
            // console.log(get1.data.data)
        }
    }
</script>

<style lang="less" scoped>
  .recommend {
    flex: 1;

    .van-image {
      margin-left: 16px;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .tips {
      position: relative;
      margin-bottom: 15px;
      font-size: 14px;
      text-align: center;
    }

    .tips::after, .tips::before {
      position: absolute;
      width: 60px;
      height: 1px;
      background-color: #BBBBBB;
      content: "";
    }

    .tips::after {
      top: 10px;
      right: 30px;
    }

    .tips::before {
      top: 10px;
      left: 30px;
    }

    .van-grid-item {
      height: 100px;
    }
  }
</style>
